<template>
  <div class="content">
    <div class="header">
      <img
        @click="back"
        class="back"
        src="../../../../assets/wapimgs/back.png"
      />
    </div>

    <div class="top-wrap">
      <div class="title" ref="title">{{ $t("vr.videoList") }}</div>

      <el-dropdown trigger="click" placement="bottom" @command="clickType">
        <div class="category" :style="categoryStyle">
          <i class="el-icon-caret-bottom el-icon--right select-arrow"></i>
          {{ selectedType.name }}
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            style="width: auto; min-width: 100px; text-align: center;"
            v-for="item in typeList"
            :command="item"
            >{{ item.name }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <div class="list">
      <div
        @click="clickCell(item)"
        class="cell"
        v-for="item in dataList"
        :index="item.id"
      >
        <div class="cell_left">
          <img class="left-image" :src="item.picture" />
          <div class="title">{{ item.title }}</div>
        </div>
        <div class="cell_right">
          <img class="play-icon" src="../../../../assets/imgs/play-icon.png" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "servicePath/index";
import { Cell } from "mint-ui";
import { mapState } from "vuex";
export default {
  data() {
    return {
      dataList: [],
      videoType: 0,
      typeList: [],
      selectedType: {},
      categoryStyle: ""
    };
  },
  computed: {
    ...mapState(["lang"])
  },
  mounted() {
    this.videoType = this.$route.query.videoType;
    var videolist = this.$route.query.videolist;
    if (videolist == 1) {
      this.videoType = 3;
    }
    if (this.videoType == undefined) {
      console.log("不传videoType，默认为3");
      this.videoType = 3;
    } else if (this.videoType < 1 || this.videoType > 3) {
      console.log("videoType < 1 || > 3 默认3");
      this.videoType = 3;
    }

    console.log("videoType", this.videoType);
    this.handleGetVideoTypes();
  },
  watch: {
    lang() {
      this.handleGetVideoTypes();
    }
  },
  methods: {
    back() {
      this.$router.go(-1);
    },

    clickCell(item) {
      let isLogin = sessionStorage.getItem("vrToken");
      if (!isLogin) {
        this.$router.push({
          path: `login`
        });
        console.log("hasLogin 请登录");
      } else {
        var url = encodeURIComponent(item.url);
        this.$router.push("videodetail?url=" + url);
      }
    },
    clickType(item) {
      this.selectedType = item;
      this.videoType = item.id;
      this.handleGetVideoList();
    },
    async handleGetVideoList() {
      const loading = this.$loading();
      const res = await api.getVideoList(this.lang, this.videoType);

      this.dataList = res.data;

      loading.close();
    },

    async handleGetVideoTypes() {
      //剧院id，1大剧院，2小剧院，3微型剧院，不填或者填0返回全部分类
      let params = { theatreId: this.videoType, language: this.lang };
      const res = await api.getVideoTypes(params);
      console.log("getVideoTypes", res);
      if (res.data) {
        this.typeList = res.data;
        if (this.typeList.length) {
          //优先匹配页面入参
          // if (this.videoType != undefined) {
          //   this.typeList.map(object => {
          //     if (object.id == this.videoType) {
          //       this.selectedType = object;
          //       this.videoType = object.id;
          //     }
          //   });
          // }
          //没有匹配到，则默认第一个
          // if (this.selectedType.name == undefined) {
          this.selectedType = this.typeList[0];
          this.videoType = this.selectedType.id;
          // }

          this.$nextTick(() => {
            let titleWidth = this.$refs.title.offsetWidth;
            let clientWidth = document.body.clientWidth;
            let width = clientWidth - 20 - titleWidth - 20 - 20;

            //console.log(clientWidth, titleWidth, width);
            this.categoryStyle = "max-width:" + width + "px;";
          });
        }
      }

      this.handleGetVideoList();
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
}
.header {
  width: 100%;
  height: 80px;
  // background-color: #409eff;
  display: flex;
  align-items: center;
  .back {
    width: 20px;
    height: 20px;
    margin-left: 20px;
  }
}
.top-wrap {
  width: 100%;
  margin: 0 auto;
  min-height: 32px;
  height: auto;
  // background-color: #409eff;
  display: flex;
  justify-content: space-between;
  // align-items: baseline;
  .title {
    width: auto;
    height: 32px;
    margin-left: 20px;
    // float: left;
    font-size: 23px;
    line-height: 32px;
    color: #555555;
    // background-color: #ff00fe;
  }
  .title:first-letter {
    color: #ff2d62;
  }
  .category {
    width: auto;
    max-width: 200px; //数据返回重新计算
    min-height: 20px;
    height: auto;
    padding-left: 10px;
    padding-right: 5px;
    margin-top: 6px;
    // float: right;
    margin-right: 20px;
    background: #fb4e52;
    // background: #ffffff;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    line-height: 20px;
    //text-overflow: ellipsis; /* 超出... */
    //word-break: keep-all; /* 不换行 */
    //white-space: nowrap; /* 不换行 */
    //overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
    .select-arrow {
      float: right;
      margin-top: 3px;
    }
  }
}
.list {
  width: 100%;
  height: auto;
  margin-top: 20px;
  .cell {
    width: auto;
    height: 89px;
    margin-left: 20px;
    margin-right: 20px;
    background: #ffffff;
    box-shadow: 0px 5px 15px rgba(27, 27, 78, 0.1);
    opacity: 1;
    border-radius: 10px;
    margin-bottom: 20px;
    display: flex;
    // justify-content: space-between;
    .cell_left {
      width: auto;
      height: 100%;
      // margin-left: 10px;
      // margin-right: 10px;
      // background-color: #409eff;
      // display: 1;
      // float: left;
      flex: 1;
      .left-image {
        width: 94px;
        height: 59px;
        margin-left: 10px;
        margin-top: 15px;
        float: left;
        position: absolute;
      }
      .title {
        height: auto;
        max-height: 50px;
        line-height: 25px;
        // width: 50px;
        margin-left: 114px;
        margin-right: 10px;
        // background-color: #ff00ff;
        margin-top: 15px;
        overflow: hidden;
        float: left;
      }
    }
    .cell_right {
      width: 40px;
      height: 100%;
      // float: right;
      // background-color: #993843;
      float: right;
      .play-icon {
        width: 25px;
        height: 25px;
        margin-top: 32px;
        // background-color: #ff00ff;
        margin-right: 15px;
        float: right;
        // position: absolute;
      }
    }
  }
}
</style>
